<template>
  <div>xiixix</div>
  <div class="parent">
    祖组件 --- {{name}}---{{price}}
    <Suspense>
      <template v-slot:default>
        <Child :car="car"></Child>
      </template>
      <template v-slot:fallback>
        <h4>稍等一下，正在加载中~~~~</h4>
      </template>
    </Suspense>
    
  </div>
</template>

<script>
import {reactive,toRefs,provide,defineAsyncComponent} from 'vue'
// import Child from './components/Child.vue'  //静态引入
// 异步引入组件
let Child = defineAsyncComponent(()=>import('./components/Child.vue'))
export default {
  name:'Parent',
  components:{Child},
  setup(){
    let car = reactive({
      name:'benchi',
      price:'40w'
    })
    // 向后代传递数据
    provide('car',car)
    return {
      car,
      ...toRefs(car)
    }
  }
}
</script>

<style>
  .parent{ 
    background-color: gray;
    padding: 10px;
  }
</style>